<!DOCTYPE html>
<html>
<head>
	<META HTTP-EQUIV="Pragma" CONTENT="no-cache">
	<META HTTP-EQUIV="Expires" CONTENT="-1">
	<#include "../common/common.ftl"> 
	<#include "../common/jqplot.ftl">
	<title>${(test.projectNameCn)!} - ${(test.ver)!} - 性能测试报告</title>
	<link href="${req.getContextPath()}/css/slider.css" rel="stylesheet">
	<link href="${req.getContextPath()}/plugins/datepicker/css/datepicker.css" rel="stylesheet">
	<link href="${req.getContextPath()}/plugins/webuploader-0.1.5/webuploader.css" rel="stylesheet">
	<script type="text/javascript" src="${req.getContextPath()}/plugins/webuploader-0.1.5/webuploader.min.js"></script>
	<style>
	.popover {
		max-height: 500px;
		overflow-y: scroll;
	}
	
	.select-item {
		width: 60px;
	}

	.control-label input {
		vertical-align: top;
		margin-left: 2px
	}

	li.monitor-state {
		height: 10px;
	}
	.controls code {
		vertical-align: middle;
	}

	.datepicker {
		z-index:1151;
	}

	div.chart {
		border: 1px solid #878988;
		margin-bottom: 12px;
	}

	div.modal-body div.chart {
		border:1px solid #878988; 
		height:250px; 
		min-width:500px; 
		margin-bottom:12px; 
		padding:5px 
	}

	.table thead th {
		vertical-align: middle;
	}

	.jqplot-yaxis {
		margin-right: 20px;
	}

	.jqplot-xaxis {
		margin-top: 5px;
	} 

	.rampup-chart {
		width: 400px;
		height: 300px
	}

	div.div-host {
		border: 1px solid #D6D6D6;
		height: 50px;
		margin-bottom: 8px;
		overflow-y: scroll;
		border-radius: 3px 3px 3px 3px;
	}

	div.div-host .host {
		color: #666666;
		display: inline-block;
		margin-left: 7px;
		margin-top: 2px;
		margin-bottom: 2px;
	}

    .add-host-btn {
        margin-top:27px;
        margin-left:287px;
        position:absolute
    }

	i.expand {
        background: url('${req.getContextPath()}/img/icon_expand.png') no-repeat;
        display: inline-block;
		height: 16px;
		width: 16px;
		line-height: 16px;
		vertical-align: text-top;
	}

	i.collapse{
        background: url('${req.getContextPath()}/img/icon_collapse.png') no-repeat;
        display: inline-block;
		height: 16px;
		width: 16px;
		line-height: 16px;
		vertical-align: text-top;
	}

	#test_name + span {
		float: left;
	}

	#query_div label, #concurrentUser label, #testUrlContent label, #otherContent label {
		width: 100px;
	}

	.form-horizontal .control-group {
		margin-bottom:10px;
	}

	.controls .span3 {
		margin-left: 0;
	}

	.control-group.success td > label[for="test_name"] {
		color: #468847;
	}

	.control-group.error td > label[for="test_name"] {
		color: #B94A48;
	}

	#script_control.error .select2-choice {
		border-color: #B94A48;
		color: #B94A48;
	}

	#script_control.success .select2-choice {
		border-color: #468847;
		color: #468847;
	}

	legend {
		padding-top: 10px;
	}

	label.region {
		margin-left:-40px;
	}

	.span4-5 {
		width: 340px;
	}
	.span3-4 {
		width: 260px;
	}
	.span2-3 {
		width: 180px;
	}

	#thelist { margin: 0; padding: 0; padding-right: 30px; list-style: none; }
	#thelist li { padding: 5px; font-weight: bold; margin: 5px 0; }
	#thelist li button { float: right }
	</style>
</head>

<body>
<div id="wrap">
	<#include "../common/navigator.ftl">
	<div class="container">
		<h2>${(test.projectNameCn)!} - ${(test.ver)!} - 性能测试报告</h2>
	
		<hr>

		<div class="well" style="background: #fff;">
			<div>
				<fieldset> 
					<legend style="padding: 0; margin: 0; font-size: 18px;">基本信息</legend>
					<table class="table table-bordered table-hover">
						<tr>
							<th width="160">测试目的</th>
							<td>${test.testPrupose}</td>
						</tr>
						<tr>
							<th width="160">测试内容</th>
							<td>${test.testInfo}</td>
						</tr>
						<tr>
							<th width="160">测试相关文档</th>
							<td>
								<ul id="thelist" class="uploader-list"></ul>
							</td>
						</tr>
						<tr>
							<th width="160">性能指标</th>
							<td>
								<span class="label label-info">并发用户数：${test.vuser}</span>
								<span class="label label-warning">平均响应时间：${test.responsetime}</span>
								<span class="label label-success">成功率：${test.succRate} %</span>
							</td>
						</tr>
						<tr>
							<th width="160">测试环境</th>
							<td>
								${test.testEnv}
								<br>
								<span class="label label-default">${(test.testEnvInfo)!}</span>
							</td>
						</tr>
						<tr>
							<th width="160">测试进展</th>
							<td>
								<strong>完成度：</strong> <span id="completeness">0%</span>
								<br><br>
								<strong>性能达标率：</strong>
							</td>
						</tr>
						<tr>
							<th width="160">测试时间</th>
							<td>
								<#if test.createdDate??>${test.createdDate?string('yyyy-MM-dd HH:mm')}</#if>
							</td>
						</tr>
						<tr>
							<th width="160">测试小结</th>
							<td>
								<textarea style="resize: none; width:98%; height:36px"></textarea>
							</td>
						</tr>
						<tr>
							<th width="160">测试评级</th>
							<td>
								<select style="width: 100%">
									<option value="优秀">优秀（在达到良好的基础上，同时50%的系统测试模块或关键模块超出预期测试目标10%以上）</option>
									<option value="良好">良好（系统所有测试模块或关键模块均达到性能测试预期目标）</option>
									<option value="一般">一般（20%以内的系统测试模块或关键模块达未到预期目标，且不存在A类以上(含)性能问题(内外部) ）</option>
									<option value="差">差（20%以上且50%以内的系统测试模块或关键模块达未到预期目标 ）</option>
									<option value="极差">极差（50%以上的系统测试模块或关键模块达未到预期目标）</option>
								</select>
							</td>
						</tr>
						<tr>
							<th width="160">测试人员</th>
							<td>
								${(test.requireman)!}
							</td>
						</tr>
						<tr>
							<th width="160">测试接口人</th>
							<td>
								${(test.peoples)!}
							</td>
						</tr>
						<tr>
							<th width="160">测试问题跟踪记录表</th>
							<td>
								
							</td>
						</tr>
					</table>

					<button type="button" class="btn btn-success" id="save_test_btn" style="width:55px">
						保存
					</button>
				</fieldset>
			</div>
		</div>

	
		<div class="well" style="background: #fff;">
			<div>
				<fieldset> 
					<legend style="padding: 0; margin: 0; font-size: 18px;">测试详细数据</legend>
					
					<table class="table table-bordered table-hover">
						<thead>
							<tr>
								<th>状态</th>
								<th>测试名称</th>
								<th>开始时间</th>
								<th>持续阙值</th>
								<th>TPS</th>
								<th>MIT</th>
								<th>成功率</th>
								<th>Vusers</th>
								<th>性能是否达标</th>
							</tr>
						</thead>
						<tbody>
							<#assign testList = testListPage.content/>	
							<#assign totalLine = 0/>	
							<#assign completenessLine = 0/>
							<@list list_items=testList others="table_list"; testP, test_index>
							<#assign totalVuser = (testP.vuserPerAgent) * (testP.agentCount) />
							<#assign totalLine = totalLine + 1/>
							<#assign success = -1/>
							<tr>
								<td class="center">
									<div class="ball" id="ball_${test.id}"
										 data-html="true"
										 data-content="${"${testP.progressMessage}<br/><b>${testP.lastProgressMessage}</b>"?replace('\n', '<br>')?html}"
										 title="<@spring.message "${testP.status.springMessageKey}"/>"
										 rel="popover">
										<img class="status" src="${req.getContextPath()}/img/ball/${testP.status.iconName}"/>
										<#if testP.status.iconName == 'green.png'>
										<#assign completenessLine = completenessLine + 1/>
										</#if>
									</div>
								</td>
								<td>${testP.testName}</td>
								<td>
									<#if testP.startTime??>${testP.startTime?string('yyyy-MM-dd HH:mm')}</#if>
								</td>
								<td>
									<#if testP.isThresholdDuration()>
									${testP.durationStr}
									<#else>
									${testP.runCount}
									</#if>
								</td>
								<td><#if testP.tps??>${(testP.tps)?string(",##0.#")}</#if></td>
								<td><#if testP.meanTestTime??>${(testP.meanTestTime)?string("0.#")}</#if></td>
								<td>
									<div class="ellipsis" rel="popover" data-html="true" data-placement="top"
										 data-content="<@spring.message "perfTest.list.totalTests"/> : ${((testP.tests + testP.errors)?string(",##0"))!""}<br/><@spring.message "perfTest.list.successfulTests"/> : ${(testP.tests?string(",##0"))!""}<br/><@spring.message "perfTest.list.errors"/> : ${(testP.errors?string(",##0"))!""}<br/>">
										<#if testP.tests?? && testP.errors?? && (testP.tests + testP.errors) != 0>
											<#assign success = (100 - (testP.errors/(testP.tests +testP.errors) * 100))/>
											${success?string("0.##")}%
										</#if>
									</div>
								</td>
								<td>
									<div class="ellipsis" rel="popover" data-html="true" data-placement="left"
										 data-content="<@spring.message "perfTest.list.agent"/> : ${testP.agentCount!0?string(",##0")}<br/><@spring.message "perfTest.list.process"/>  : ${testP.processes!0?string(",##0")}<br/><@spring.message "perfTest.list.thread"/> : ${testP.threads!0?string(",##0")}">
										${totalVuser?string(",##0")}
									<div>
								</td>
								<td>
									<#if testP.status.iconName == 'green.png'>
										<#if success gte 0>
											<#if success gte (test.succRate)?eval>
											<span class="label label-success">测试通过</span>
											<#else>
											<span class="label label-warning">测试不通过</span>
											</#if>
										</#if>
									<#else>
										<#if testP.status.iconName == 'red.png'>
											<span class="label label-danger">测试失败</span>
										<#else>
										</#if>
									</#if>
								</td>
							</tr>
							</@list>
						</tbody>
					</table>	 
				</fieldset>
			</div>
		</div>

	</div>
	<!--end container-->

	
</div>



<#include "../common/copyright.ftl">
<script src="${req.getContextPath()}/plugins/datepicker/js/bootstrap-datepicker.js"></script>
<script src="${req.getContextPath()}/js/bootstrap-slider.min.js"></script>
<script src="${req.getContextPath()}/js/jquery.form.js"></script>
<script src="${req.getContextPath()}/js/ramp_up.js?${nGrinderVersion}"></script>

	<script type="text/javascript">
		var BASE_UPLOAD_URL = '${req.getContextPath()}/';
		var totalLine = ${totalLine};
		var completenessLine = ${completenessLine};

		$(document).ready(function(){	

			getUploadFileList();
			
			if (totalLine > 0) {
				$('#completeness').html((completenessLine / totalLine * 100).toFixed(2) + '%');
			}
		})

		function addUploadFile(path) {
			var html = '<li><a title="点击查看或下载" href="'+ BASE_UPLOAD_URL + path +'" target="_blank">'+ path +'</a> </li>';

			$('#thelist').append(html);
		}

		function getUploadFileList() {
			var fileJson = <#if (test.testFiles)?? && test.testFiles != ''>${test.testFiles}<#else>[]</#if>;

			$.each(fileJson, function(i) {
				addUploadFile(fileJson[i]);
			})
		}
	</script>


	</body>
</html>
